<template>
  <div class="login-container">
    <div class="left" />
    <div class="right">
      <div class="box">
        <h2>登录</h2>
        <el-form ref="ruleFormref" :model="ruleForm" :rules="rules" label-width="210px">
          <el-form-item prop="mobile" label-width="10px">
            <el-input v-model="ruleForm.mobile" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="password" label-width="10px">
            <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label-width="10px" prop="isAgree">
            <el-checkbox v-model="ruleForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item label-width="10px">
            <el-button type="primary" style="width: 350px;" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form></div>
    </div>
  </div>
</template>

<script>
// 导入axios
// import { loginRequest } from '@/api/user'
export default {
  data() {
    // 自定义方法 给勾选表单使用的
    const validateIsAgree = (rule, value, isAgree) => {
      if (!value) {
        isAgree(new Error('您必须勾选用户的使用协议'))
      } else {
        isAgree()
      }
    }
    return {
      ruleForm: {
        mobile: '',
        password: '',
        isAgree: true
      },
      // 非空和正则的校验
      rules: {
        mobile: [{ required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^((\+|00)86)?1\d{10}$/, message: '请输入正确是手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\w{6,15}$/, message: '请输入6-15位是密码', trigger: 'blur' }],
        isAgree: [{ validator: validateIsAgree, trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm() {
      // console.log(a) 若通过点击事件传参 则显示 undefined 如果在点击事件没有括号传参 则打印出来的是事件对象,里面有很多方法
      this.$refs.ruleFormref.validate(async valid => {
        if (valid) {
          this.$message('登录成功')
          // const data = await axios.post('https://heimahr.itheima.net/api/sys/login', {
          /* const data = await request.post('/sys/login', {
            mobile: this.ruleForm.mobile,
            password: this.ruleForm.password
          }) */
          // 二次封装后的写法
          try {
            /* const data = await loginRequest({
              mobile: this.ruleForm.mobile,
              password: this.ruleForm.password
            })
            console.log('封装请求成功', data) */
            // 调用vuex里面的actions方法 并且通过载荷把发送ajax里面得到参数ruleForm 账号和密码添加进去 传递给vuex
            this.$store.dispatch('user/loginActions', {
              mobile: this.ruleForm.mobile,
              password: this.ruleForm.password
            })
          } catch (err) {
            //
          }
        } else {
          this.$message('登录失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  .left {
    background-image: url('~@/assets/common/login_back.png');
    background-repeat: no-repeat;
    background-size: cover;
    flex: 3;
    border-top-right-radius: 60px
  }
  .right {
    flex: 2;
    display: flex;
      justify-content: center;
      align-items: center;
      .box{
        h2 {
          margin-bottom: 30px;
          margin-left: 10px;
        }
      }
  }
}
</style>
